<template>
  <div class="csssuper clickHide">
    <div class="module-header multiple-EF-queryAll-title">
      <h1 class="multiple-EF-result">搜索结果</h1>
      <a class="multiple-EF-queryAll" href="JavaScript:void(0)" >查看完整信息&gt;</a>
      <!--<span style="color: black"> 查看完整信息 > </span>-->
    </div>
    <div class="paper-num">
      <label>运单号 ： </label>
      <span class="active mulwbn">
        {{waybillNoReultDto['waybillNoReultDto']?waybillNoReultDto['goodsName']:''}}
      </span>
    </div>
    <div class="csssuper-div-header active" id="queryMulZTXX">货物轨迹</div>
    <div class="xzk">
      <ul class="cssbig trajectory">
        <li class="full">
          <TABLE class="full">
            <TR class="blue">
              <TD class="haspad" colspan="2">
                <span class="css">
                  <img src="/static/resources/img/multiple/mul-dz.png" />
                  <span class="css receiveOrgName">
                    {{waybillNoReultDto['receiveOrgName']?waybillNoReultDto['receiveOrgName']:''}}
                  </span>
                </span> ->
                <span class="css">
                  <img src="/static/resources/img/multiple/mul-dz.png" />
                  <span class="css destinationStationOrgName customerPickupOrgName">
                    {{waybillNoReultDto['customerPickupOrgName']?waybillNoReultDto['customerPickupOrgName']:''}}
                  </span>
                </span>
              </TD>
            </TR>
            <TR class="full blue">
              <TD class="haspad">
                <!-- 发货 -->
                <TABLE class="full">
                  <TR class="full blue-tr">
                    <TD>
                      <img class="mul-xr" src="/static/resources/img/multiple/mul-xr.png" />
                      <span class="css deliveryCustomerContact">
                        {{waybillNoReultDto['deliveryCustomerContact']?waybillNoReultDto['deliveryCustomerContact']:'无'}}
                      </span>
                    </TD>
                    <TD>
                      <img src="/static/resources/img/multiple/mul-sj.png" />
                      <span class="css deliveryCustomerMobilephone">
                        {{waybillNoReultDto['deliveryCustomerMobilephone']?waybillNoReultDto['deliveryCustomerMobilephone']:'无'}}
                      </span>
                    </TD>
                  </TR>
                  <TR class="blue-tr addr">
                    <TD colspan="2">
                      <img src="/static/resources/img/multiple/mul-dz.png" />
                      <span class="css deliveryCustomerAddress">
                        {{waybillNoReultDto['deliveryCustomerAddress']?waybillNoReultDto['deliveryCustomerAddress']:'无'}}
                      </span>
                    </TD>
                  </TR>
                </TABLE> <!-- 发货 -->
              </TD>
              <TD class="haspad" style="width: 50%">
                <!-- 收货 -->
                <TABLE class="full">
                  <TR class="full blue-tr">
                    <TD>
                      <img class="mul-xr" src="/static/resources/img/multiple/mul-xr-s.png" />
                      <span class="css receiveCustomerContact">
                        {{waybillNoReultDto['receiveCustomerContact']?waybillNoReultDto['receiveCustomerContact']:'无'}}
                      </span>
                    </TD>
                    <TD>
                      <img src="/static/resources/img/multiple/mul-sj.png" />
                      <span class="css receiveCustomerMobilephone">
                        {{waybillNoReultDto['receiveCustomerMobilephone']?waybillNoReultDto['receiveCustomerMobilephone']:'无'}}
                      </span>
                    </TD>
                  </TR>
                  <TR class="blue-tr addr">
                    <TD colspan="2">
                      <img src="/static/resources/img/multiple/mul-dz.png" />
                      <span class="css receiveCustomerAddress">
                        {{waybillNoReultDto['receiveCustomerAddress']?waybillNoReultDto['receiveCustomerAddress']:'暂无收货地址'}}
                      </span>
                    </TD>
                  </TR>
                </TABLE> <!-- 收货 -->
              </TD>
            </TR>
            <TR class="gjmultiple-box">
              <TD class="haspad" colspan="2">
                <div class="gjmultiple-div">
                  <!--軌跡 -->
                  <TABLE class="gjmultiple">
                    <TR v-if="wayBIllNoLocusLists.length > 0" v-for="(item,index) in wayBIllNoLocusLists" class='full' :key="index">
                      <TD class='trajectory-time'>
                        <p> {{item.datestrformate[0]}}</p>
                        <span>{{item.datestrformate[1]}}</span>
                      </TD>
                      <TD class='trajectory-font"+blackcss+"'>
                        {{item.imgstrone}}
                        <span :class="`css ${item.currentStatus}`"
                        :title='item.hwgjstr'>
                          {{item.hwgjstr}}
                        </span>
                        <span class='css'>
                    <label class='operateOrgName' :title='item.operateOrgName'>
                      {{item.operateOrgName}}
                    </label>
                    <label class='operateName' title='"+d.operateName+"'>
                      {{item.operateName}}
                    </label>
                    <label class='czgjstr' :title='item.czgjstr'>
                      {{item.czgjstr}}
                    </label>
                  </span>
                      </TD>
                    </TR>
                    <TR v-if="multiplegjs.length > 0" v-for="(item,index) in multiplegjs" :key="index" class='full'>
                      <TD class='trajectory-time'>
                        <p>{{item.datestrformate[0]}}</p>
                        <span>{{item.datestrformate[1]}}</span>
                      </TD>
                      <TD class='trajectory-font"+blackcss+"'>
                        {{item.imgstrone}}
                        <span
                          :class="'css'+item.currentStatus"
                          :title='item.currentStatus'>
                        {{item.currentStatus}}
                        </span>
                        <span class='css'>
                          <label class='operateOrgName'
                                                 :title='item.operateOrgName'>
                          {{item.operateOrgName}}
                        </label>
                          <label class='operateName'
                                 :title='item.operateName'>
                            {{item.operateName}}
                          </label>
                          <label class='operateTypeName' :title='item.operateTypeName'>
                            {{item.operateTypeName}}
                          </label>
                        </span>
                      </TD>
                    </TR>
                  </TABLE>
                </div>
                <!-- 軌跡 -->
              </TD>
            </TR>
          </TABLE>
        </li>
      </ul>
    </div>
    <div class="csssuper-div-header " id="queryMulHWGJ">跟踪记录</div>
    <div class="xzk gzjlmultiple-xzk">
      <ul class="cssbig">
        <li class="full">
          <div class="gjmultiple-div">
            <TABLE class="gzjlmultiple full">
              <TR v-if="trackRecordLists.length > 0" v-for="(item,index) in trackRecordLists" :key="index" class='full'>
                <TD class='trajectory-font'>
                  {{item.imgstrone}}
                  <span title=' "+contentgzjl+" '>
                    {{item.contentgzjl | controlLength(30)}}
                  </span>
                </TD>
                <TD class='trajectory-info dept'>
                  <span>{{item.qctime}}</span>
                  <p>{{item.createOrgNamegzjl | controlLength(14)}}</p>
                </TD>
                <TD class='trajectory-info'>
                  <span>{{item.sltime}}</span>
                  <p>{{item.acceptedOrgNamegzjl | controlLength(14)}}</p>
                </TD>
              </TR>
              <TR v-if="gzjlmultiples.length > 0" v-for="(item,index) in gzjlmultiples" :key="index" class='full'>
                <TD class='trajectory-font'>
                  {{item.imgstrone}}
                  <span title='"+contentgzjl+"'>{{item.contentgzjl | controlLength(30)}}</span>
                </TD>
                <TD class='trajectory-info dept'>
                  <span>{{item.qctime}}</span>
                  <p>{{item.createOrgNamegzjl | controlLength(14)}}</p>
                </TD>
                <TD class='trajectory-info'>
                  <span>{{item.sltime}}</span>
                  <p>{{item.acceptedOrgNamegzjl | controlLength(14)}}</p>
                </TD>
              </TR>
            </TABLE>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
    export default {
        name: "multiplestart-com",
        props:['waybillNoReultDto','wayBIllNoLocusList','trackRecordList','multiplegj','gzjlmultiple'],
        methods:{
        },
        computed:{
          wayBIllNoLocusLists(){
            let arr = [];
            if(this.wayBIllNoLocusList.length>0){
              this.wayBIllNoLocusList.each(function(i, d){
                let json = {};
                json.imgstrone =  "<img src='/static/resources/img/multiple/mul-zdthree.png' />";
                json.topstr = "bottom";
                json.blackcss ="";
                if(i===0){
                  json.imgstrone =  "<img src='/static/resources/img/multiple/mul-zdone.png' />";
                  json.blackcss =" black";
                }
                let operateTimeStr = d.operateTime;
                if(operateTimeStr!=null&&operateTimeStr!==''){
                  if(operateTimeStr>999999999){
                    operateTimeStr =parseInt(operateTimeStr/1000) ;
                  }
                }
                let unixTimestamp = new Date( operateTimeStr*1000 ) ;
                let commonTime = unixTimestamp.toLocaleString();
                json.datestrformate = commonTime.split("&");
                json.hwgjstr = queryGjhwzt(d.currentStatus);
                json.czgjstr = queryGjczzt(d.operateTypeName);
                json.currentStatus = d.currentStatus;
                json.operateOrgName = d.operateTypeName;
                json.operateName = d.operateName;
                arr.push(json);
              });
            }
            return arr;
          },
          trackRecordLists() {
            let arr = [];
            if(this.trackRecordList.length>0){
              this.trackRecordList.each(function (i, d) {
                let json = {};
                if(null==d){
                  return;
                }
                let createTimeStr = d.createTime+"";

                if(createTimeStr!=null&&createTimeStr!=''){
                  if(createTimeStr>999999999){
                    createTimeStr = parseInt(createTimeStr/1000);
                  }
                }

                let acceptedTimeStr = d.acceptedTime+"";

                if(acceptedTimeStr!=null&&acceptedTimeStr!=''){
                  if(acceptedTimeStr>999999999){
                    acceptedTimeStr = parseInt(acceptedTimeStr/1000);
                  }
                }


                let unixTimestamp = new Date( createTimeStr*1000 ) ;
                let commonTime = unixTimestamp.toLocaleString();
                let datestrformate = commonTime.split("&");
                let unixTimestampsl = new Date( acceptedTimeStr*1000 ) ;
                let commonTimesl = unixTimestampsl.toLocaleString();
                let datestrformatesl = commonTimesl.split("&");

                json.qctime ="";
                (null == d.createTime) ? json.qctime = "" : json.qctime =  "<label>起草</label>"+datestrformate[0]+" "+datestrformate[1];

                json.sltime="";
                (null == d.acceptedTime) ? json.sltime = "" : json.sltime = "<label>受理</label>"+datestrformatesl[0]+" "+datestrformatesl[1];

                json.contentgzjl = d.trackContent;
                (null == d.trackContent) ? json.contentgzjl = "" : json.contentgzjl = d.trackContent;

                json.createOrgNamegzjl = d.createOrgName;
                (null == d.createOrgName) ? json.createOrgNamegzjl = "" : json.createOrgNamegzjl = d.createOrgName;

                json.acceptedOrgNamegzjl = d.acceptedOrgName;
                (null == d.acceptedOrgName) ? json.acceptedOrgNamegzjl = "" : json.acceptedOrgNamegzjl = d.acceptedOrgName;

                json.imgstrone =  "<img src='/static/resources/img/multiple/mul-zdfour-gzjl.png' />";
              });
            }
            return arr;
          },
          multiplegjs() {
            //$(".gjmultiple").nextAll().remove();
            let rs = this.multiplegj;
            let sumsize = 0 ;
            if(null==rs||'undefined'===rs){

            }else{
              sumsize = rs.length-2
            }
            let arr = [];
            if(rs.length>0){
              rs.each(function (i, d) {
                let json = {};
                if(null==d){
                  return;
                }
                json.imgstrone =  "<img src='/static/resources/img/multiple/mul-zdthree.png' />";
                json.topstr = "bottom";
                json.blackcss ="";

                if(i==sumsize){
                  imgstrone =  "<img src='/static/resources/img/multiple/mul-zdone.png' />";
                  json.topstr ="top";
                  json.blackcss =" black";
                }
                let operateTimeStr = d.operateTime;

                if(operateTimeStr!=null&&operateTimeStr!==''){
                  if(operateTimeStr>999999999){
                    operateTimeStr =parseInt(operateTimeStr/1000) ;
                  }
                }
                let unixTimestamp = new Date( operateTimeStr*1000 ) ;
                let commonTime = unixTimestamp.toLocaleString();
                json.datestrformate = commonTime.split("&");
                json.currentStatus = d.currentStatus;
                json.operateOrgName = d.operateOrgName;
                json.operateName = d.operateName;
                json.operateTypeName = d.operateTypeName;
                arr.push(json);
              })
            }
            return arr;
          },
          gzjlmultiples() {
            let rs = this.gzjlmultiple;
            let arr = [];
            if(rs.length>0){
              rs.each(function (i, d) {
                let json = {};
                if(null==d){
                  return;
                }

                let createTimeStr = d.createTime+"";

                if(createTimeStr!=null&&createTimeStr!==''){
                  if(createTimeStr>999999999){
                    createTimeStr = parseInt(createTimeStr/1000) ;
                  }
                }

                let acceptedTimeStr = d.acceptedTime+"";

                if(acceptedTimeStr!=null&&acceptedTimeStr!==''){
                  if(acceptedTimeStr.length>10){
                    acceptedTimeStr = parseInt(acceptedTimeStr/1000);
                  }
                }

                let unixTimestamp = new Date( createTimeStr*1000 ) ;
                let commonTime = unixTimestamp.toLocaleString();
                let datestrformate = commonTime.split("&");
                let unixTimestampsl = new Date( acceptedTimeStr*1000 ) ;
                let commonTimesl = unixTimestampsl.toLocaleString();
                let datestrformatesl = commonTimesl.split("&");

                json.qctime ="";
                (null == d.createTime) ? json.qctime = "" : json.qctime =  "<label>起草</label>"+datestrformate[0]+" "+datestrformate[1];

                json.sltime="";
                (null == d.acceptedTime) ? json.sltime = "" : json.sltime = "<label>受理</label>"+datestrformatesl[0]+" "+datestrformatesl[1];

                json.contentgzjl = d.trackContent;
                (null == d.trackContent) ? json.contentgzjl = "" : json.contentgzjl = d.trackContent;

                json.createOrgNamegzjl = d.createOrgName;
                (null == d.createOrgName) ? json.createOrgNamegzjl = "" : json.createOrgNamegzjl = d.createOrgName;

                json.acceptedOrgNamegzjl = d.acceptedOrgName;
                (null == d.acceptedOrgName) ? json.acceptedOrgNamegzjl = "" : json.acceptedOrgNamegzjl = d.acceptedOrgName;

                json.imgstrone =  "<img src='/static/resources/img/multiple/mul-zdfour-gzjl.png' />";

                // $(".gzjlmultiple").prepend(lis);
                arr.push(json);
              })
            }

            return arr;

          }
        }
    }
</script>

<style scoped>

</style>
